<template>
  <Table
      :columns="qualColumns"
      :row-key="(record,index) => index"
      :data-source="source"
      bordered
      :pagination="{pageSize:99,hideOnSinglePage:true}"
  >
    <template #adSlot="{ record }">
      <trajectory :record="record"></trajectory>
    </template>
    <template #indexSlot="{ index }">{{index+1}}</template>
    <template #detail="{ record }">
      <span class="blue pointer">查看</span>
    </template>
  </Table>
</template>

<script lang="ts">
interface linkItem {
  aptChanges: any,
  certId: string,
  certName: string,
  certNo: string,
  certPrintId: string,
  certState: string,
  certStateReason: any,
  certType: string,
  issueDate: number
  issueUnitName: string,
  validEdate: number
}
import {defineComponent, PropType} from 'vue';
import { Table  } from 'ant-design-vue';
import { trajectory } from "/@/components/trajectComponent/index";
import { parseTime } from '/@/utils';

let reference:any  = [];

const mergeCellKey = (index:number,key:string) => {
  if(index===0){
    let i = 1;
    let thisValue = null;
    reference.forEach((item,x)=>{
      if(x===0){
        thisValue = item[key]
      }else {
        thisValue === item[key]?i++:false
      }
    })
    return i
  }else {
    let i = 1;
    let beforeValue = reference[index-1][key];
    let thisValue = reference[index][key];
    if(thisValue===beforeValue){
      return 0
    }else {
      for(let j=index+1;j<reference.length;j++){
        if(thisValue===reference[j][key]){
          i++
        }else {
          break
        }
      }
      return i
    }
  }
}

const qualColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  {
    title: '证书编号',
    dataIndex: 'certNo',
    customRender: ({ text, index }) => {
      return {
        children: text,
        props: {
          rowSpan: mergeCellKey(index,'certNo')
        } as any
      }
    },
  },
  { title: '资质名称', dataIndex: 'certName' , slots: ({ customRender: 'adSlot' })},
  { title: '发证日期', dataIndex: 'issueDate', width: 120, customRender: ({ record })=> parseTime(record.issueDate) },
  { title: '有效期至', dataIndex: 'certValidEdate', width: 120, customRender: ({ record })=> parseTime(record.certValidEdate) },
  { title: '发证机关', dataIndex: 'issueUnitName' ,
    customRender: ({ text, index }) => {
      return {
        children: text,
        props: {
          rowSpan: mergeCellKey(index,'issueUnitName')
        } as any
      }
    }}
]

export default defineComponent({
  components: { Table ,  trajectory},
  props: {
    source: Array as PropType<linkItem[]>,
    default: []
  },
  setup(props) {
    reference = JSON.parse(JSON.stringify(props.source));
    let { source } = props;
    return {
     qualColumns,source
    }
  }

})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

</style>
